<template>
  <div>
    <a-page-header
      title="卡片列表"
      :ghost="false"
      sub-title="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景"
    />

    <div class="mt-1">
      <div>
        <a-button size="small" @click="sort">
          <template #icon> <icon name="SortAscendingOutlined" /></template>
        </a-button>
      </div>
      <a-list
        class="mt-1"
        :data-source="data"
        :grid="{ gutter: 30, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 4 }"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-card
              size="small"
              :title="`设备号：${item.title}`"
              :bordered="false"
              hoverable
            >
              <template class="ant-card-actions" #actions>
                <icon name="BarChartOutlined" />
                <icon name="WarningOutlined" style="color: red" />
                <icon name="UserOutlined" />
              </template>
              <a-row type="flex" justify="space-around">
                <a-col :span="12">
                  <a-statistic
                    title="沟通"
                    :value="8"
                    :value-style="{ color: '#3f8600' }"
                    style="text-align: center"
                  >
                    <template #prefix>
                      <Icon name="ArrowUpOutlined" />
                    </template>
                  </a-statistic>
                </a-col>
                <a-col :span="12">
                  <a-statistic
                    title="报警"
                    :value="11"
                    :value-style="{ color: '#3f8600' }"
                    style="text-align: center"
                  >
                  </a-statistic>
                </a-col>
              </a-row>
              <a-row type="flex" justify="space-around">
                <a-col :span="12">
                  <a-statistic
                    title="已处理"
                    :value="11"
                    :value-style="{ color: '#3f8600' }"
                    style="text-align: center"
                  >
                  </a-statistic>
                </a-col>
                <a-col :span="12">
                  <a-statistic
                    title="未处理"
                    :value="11"
                    :value-style="{ color: '#3f8600' }"
                    style="text-align: center"
                  >
                    <template #prefix>
                      <Icon name="ExclamationOutlined" style="color: red" />
                    </template>
                  </a-statistic>
                </a-col>
              </a-row>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Icon } from "@/components";
import {
  Empty,
  Card,
  Button,
  Row,
  Col,
  PageHeader,
  List,
  Statistic,
} from "ant-design-vue";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    AEmpty: Empty,
    APageHeader: PageHeader,
    ACard: Card,
    ACol: Col,
    ARow: Row,
    ACardMeta: Card.Meta,
    Icon: Icon,
    AButton: Button,
    AList: List,
    AListItem: List.Item,
    AStatistic: Statistic,
  },

  setup() {
    const data = ref([
      { title: "0000001" },
      { title: "0000002" },
      { title: "0000003" },
      { title: "0000004" },
      { title: "0000005" },
      { title: "0000006" },
      { title: "0000007" },
      { title: "0000008" },
      { title: "0000009" },
      { title: "0000010" },
      { title: "0000011" },
      { title: "0000012" },
      { title: "0000013" },
    ]);

    const sort = () => {
      data.value.reverse();
    };

    return { data, sort };
  },
});
</script>
